<!-- 工作台页面 -->
<template>
  <ContentCard>
    <!-- <template #header>
      <pageHeaderNew title="我的工作台" :showBack="false"></pageHeaderNew>
    </template> -->
    <div class="workplace-container">
      <div class="top-1">
        <!-- <p>我的工作台</p> -->
        <div class="top-s">
          <icon-sound-fill
            :size="20"
            style="color: #3d7eff; margin-right: 20px"
          />
          <p>
            “您好，今天是您加入<span>佛山领壹制造有限公司</span> 第
            <span>768</span> 天，开心每一天！"
          </p>
        </div>
        <a-button @click.stop="workPlaceSetting" type="outline"
          >工作台设置</a-button
        >
      </div>
      <div class="main">
        <div class="left">
          <div class="carousel">
            <a-carousel
              :default-current="2"
              auto-play
              @change="handleChange"
              :style="{
                width: '100%',
                height: '100%'
              }"
              indicator-type="slider"
            >
              <a-carousel-item v-for="image in images" :key="image">
                <img
                  :src="image"
                  :style="{
                    width: '100%',
                    height: '100%'
                  }"
                />
              </a-carousel-item>
            </a-carousel>
          </div>

          <draggable
            :list="workplaceDraggableList.sorts[0]"
            group="dragList"
            handle=".move"
            item-key="key"
          >
            <template #item="{ element }">
              <div class="cn">
                <template v-if="element.key === 1">
                  <div
                    class="card"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="top">
                      <div></div>
                      <icon-more
                        v-show="setWorkPlaceVisible"
                        :size="28"
                        class="move icon drag-icon"
                      />
                    </div>
                    <div class="calendar">
                      <a-calendar
                        v-model="dateValue"
                        @change="dateChange"
                        mode="month"
                      />
                    </div>
                    <div class="card-top">
                      <div class="card-top-left">
                        <p>{{ new Date().getDate() }}</p>
                        <p>
                          <span>{{ getCurrentDateTime(dateValue) }} </span>
                          <span
                            >农历
                            {{
                              showCal(dateValue).lunarMonth +
                              '月' +
                              '' +
                              showCal(dateValue).lunarDay
                            }}</span
                          >
                        </p>
                      </div>
                      <!-- <div
                class="card-top-right"
                @click="
                  addRemindVisible = true;
                  currentSchedule = {};
                "
              >
                <icon-plus-circle-fill style="color: #3d7eff" />
              </div> -->
                      <a-tooltip content="新增日程待办">
                        <icon-plus-circle-fill
                          class="card-top-right"
                          @click="
                            addRemindVisible = true;
                            currentSchedule = {};
                          "
                        />
                      </a-tooltip>
                    </div>
                    <div class="card-main">
                      <div class="text" v-if="scheduleList?.length > 0">
                        <p
                          class="schedule"
                          v-for="(item, index) in scheduleList"
                          :key="item.id"
                          :style="{
                            '--schedule-bgcolor': lightenColor(item.color, 35)
                          }"
                          @click="handleSchedule(item)"
                        >
                          <a-space direction="vertical" :size="0">
                            <header
                              :style="{
                                '--schedule-dot-color': item.color
                              }"
                            >
                              {{ item.text }}
                            </header>
                            <span class="remind-tip">
                              {{
                                formatTimeRange(
                                  dateValue,
                                  item.endTime.split(',')[0],
                                  item.endTime.split(',')[1]
                                )
                              }}
                            </span>
                            <div
                              class="remind-tip"
                              v-if="item.participantId !== ''"
                            >
                              <a-space :size="0">
                                <template
                                  v-for="(item, index) in item.participantName
                                    .split(',')
                                    .slice(0, 3)"
                                  :key="index"
                                >
                                  <span>{{ item }},</span>
                                </template>
                                <span
                                  v-if="
                                    item.participantName.split(',').length > 3
                                  "
                                  >...</span
                                >
                              </a-space>
                              <span class="ml-5"
                                >等{{
                                  item.participantName.split(',').length
                                }}位参与者</span
                              >
                            </div>
                          </a-space>
                          <a-space>
                            <a-popconfirm
                              content="是否确认完成该条待办？"
                              @ok="scheduleClick(item.id, index, 1)"
                            >
                              <icon-check-circle
                                class="icon"
                                :size="24"
                                @click.stop
                                :style="{
                                  color: item.done === 1 ? '#3d7eff' : '#ccc'
                                }"
                              />
                            </a-popconfirm>
                            <a-popconfirm
                              content="是否确认删除该条待办？"
                              @ok="scheduleClick(item.id, index, 2)"
                            >
                              <icon-close-circle
                                class="icon"
                                :size="24"
                                :style="{
                                  color: '#ccc'
                                }"
                                @click.stop
                              />
                            </a-popconfirm>
                          </a-space>
                        </p>
                      </div>
                      <div v-else>当日无事项</div>
                      <div class="btn">
                        <a-button
                          @click="
                            router.push({
                              name: 'Schedule'
                            })
                          "
                          >查看更多<icon-double-right
                        /></a-button>
                        <a-button><icon-archive /> 员工关怀</a-button>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-if="element.key === 2">
                  <div
                    class="contract"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="top">
                      <p class="title">合同概况</p>
                      <icon-more
                        :size="28"
                        class="move icon drag-icon"
                        v-show="setWorkPlaceVisible"
                      />
                    </div>

                    <main>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>待签合同预警</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同到期预警</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同续签</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同变更</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同解除</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同终止</div>
                      </section>
                    </main>
                  </div>
                </template>
                <template v-if="element.key === 3">
                  <div
                    class="cn-0"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <a-list :bordered="false" hoverable size="small">
                      <template #header>
                        <div class="top">
                          <a-space :size="16">
                            <a-badge :count="2" :offset="[15, 0]">
                              <span class="title">通知公告</span>
                            </a-badge>
                            <a-button type="text">全部设为已读</a-button>
                          </a-space>
                          <a-button type="text" v-show="!setWorkPlaceVisible"
                            >设置</a-button
                          >
                          <icon-more
                            :size="28"
                            class="move icon drag-icon"
                            v-show="setWorkPlaceVisible"
                          />
                        </div>
                      </template>
                      <a-list-item>
                        <a-space>
                          <a-badge
                            :count="9"
                            dot
                            :dotStyle="{
                              width: '10px',
                              height: '10px',
                              cursor: 'pointer'
                            }"
                          >
                          </a-badge>
                          <div
                            class="text-ellipsis"
                            title="Beijing Bytedance Technology Co., Ltd.Beijing Bytedance
                  Technology Co., Ltd."
                          >
                            Beijing Bytedance Technology Co., Ltd.Beijing
                            Bytedance Technology Co., LtdTechnology Co.,
                            Ltd.Technology Co., Ltd.. Beijing Bytedance
                            Technology Co., Ltd.Beijing Bytedance Technology
                            Co., LtdTechnology Co., Ltd.Technology Co., Ltd..
                          </div>
                        </a-space>

                        <template #actions>
                          <span>2022-03-10 12:43</span>
                        </template>
                      </a-list-item>
                      <a-list-item>Bytedance Technology Co., Ltd.</a-list-item>
                      <a-list-item
                        >Beijing Toutiao Technology Co., Ltd.</a-list-item
                      >
                      <a-list-item
                        >Beijing Volcengine Technology Co., Ltd.</a-list-item
                      >
                    </a-list>
                    <div class="bottom">
                      <div></div>
                      <div>查看更多<icon-right /></div>
                      <div></div>
                    </div>
                  </div>
                </template>

                <template v-if="element.key === 4">
                  <div
                    class="cn-1"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="top">
                      <p class="title">快捷入口</p>
                      <icon-more
                        :size="28"
                        class="move icon drag-icon"
                        v-show="setWorkPlaceVisible"
                      />
                    </div>
                    <div class="main">
                      <div
                        class="item"
                        @click="
                          router.push({
                            name: 'AddNewemployee'
                          })
                        "
                      >
                        <IconFont type="icon-zuzhijiagou" :size="28" />
                        添加新员工
                      </div>
                      <div class="item">
                        <IconFont type="icon-gaizhang" :size="28" />
                        签署管理
                      </div>
                      <div class="item">
                        <IconFont
                          type="icon-panhebaobiao"
                          style="background-color: #63a0ee"
                          :size="28"
                        />
                        报表管理
                      </div>
                      <div
                        class="item"
                        @click="
                          router.push({
                            name: 'JobManagement'
                          })
                        "
                      >
                        <IconFont
                          type="icon-zhiwuguanli"
                          style="background-color: #fbb47d"
                          :size="28"
                        />

                        职务管理
                      </div>
                      <div class="item">
                        <IconFont
                          type="icon-quanxianpeizhi"
                          style="background-color: #fa908f"
                          :size="28"
                        />
                        权限管理
                      </div>
                      <div
                        class="item"
                        @click="
                          router.push({
                            name: 'HumanRoster'
                          })
                        "
                      >
                        <IconFont type="icon-caisewendang" :size="28" />
                        员工档案
                      </div>
                    </div>
                    <div class="bottom">
                      <div></div>
                      <div>展开<icon-down /></div>
                      <div></div>
                    </div>
                  </div>
                </template>
                <template v-if="element.key === 5">
                  <div
                    class="cn-2"
                    @scroll="handleScroll"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="top-2">
                      <div class="tab">
                        <div
                          class="tab-item"
                          :class="{ 'actibve-tab-item': isTab === 1 }"
                          @click="clickTab(1)"
                        >
                          {{ ` 我的待办(${params.totalItems})` }}
                        </div>
                        <div
                          class="tab-item"
                          :class="{ 'actibve-tab-item': isTab === 2 }"
                          @click="clickTab(2)"
                        >
                          我的审批(0)
                        </div>
                      </div>
                      <icon-more
                        v-show="setWorkPlaceVisible"
                        :size="28"
                        class="move icon drag-icon"
                      />
                    </div>
                    <div v-show="isTab === 1">
                      <div class="main-2" v-for="a in backlogData" :key="a.id">
                        <!-- <div class="main-2" v-for="a in backlogData" :key="a.id"> -->
                        <div class="icon"></div>
                        <div class="tab-main">
                          <div class="tab-mian-top">
                            <div class="status">
                              {{
                                backlogType.filter(
                                  (ele) => ele.id === a.type
                                )[0]?.value
                              }}
                            </div>
                            <!-- <div class="status">
                          {{
                            backlogType.filter((ele) => ele.id === a.type)[0]
                              ?.value
                          }}
                        </div> -->
                            <div class="text-main">
                              {{ a.title }}
                              <!-- {{ a.title }} -->
                            </div>
                            <div class="next-main">
                              {{ a.state === 1 ? '待处理' : '已处理' }}
                            </div>
                            <!-- <div class="next-main">
                          {{ a.state === 1 ? '待处理' : '已处理' }}
                        </div> -->
                          </div>
                          <div class="tab-mian-bottom">
                            <div class="section">
                              {{ a.createName || '系统测试' }}发起
                            </div>
                            <div class="time">
                              {{ dayjs(a.createdAt).format('YYYY年MM月DD日') }}
                            </div>
                          </div>
                          <!-- <div class="section">
                        {{ a.createName || '系统测试' }}发起
                      </div>
                      <div class="time">
                        {{ dayjs(a.createdAt).format('YYYY年MM月DD日') }}
                      </div> -->
                        </div>
                        <!-- </div> -->
                      </div>
                      <a-table v-show="isTab === 2" :columns="[]" :data="[]" />
                      <div class="bottom">
                        <div></div>
                        <div>查看更多<icon-right /></div>
                        <div></div>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-if="element.key === 6">
                  <div
                    class="card-1"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="card-top-1">
                      <p>今日考勤</p>
                      <icon-more
                        v-show="setWorkPlaceVisible"
                        :size="28"
                        class="move icon drag-icon"
                      />
                    </div>
                    <div class="card-main-1">
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>正常打卡</p>
                      </div>
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>异常打卡</p>
                      </div>
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>缺卡</p>
                      </div>
                    </div>
                    <div class="clocking-in">
                      <div class="clocking-in-item" v-for="a in 2" :key="a">
                        <div class="left">
                          <p>迟到</p>
                          <p>今日没有员工迟到</p>
                        </div>
                        <div calss="right">0人</div>
                      </div>
                    </div>
                    <div class="bottom-1">
                      <div></div>
                      <div>查看打卡记录<icon-right /></div>
                      <div></div>
                    </div>
                  </div>
                </template>
                <template v-if="element.key === 7">
                  <div
                    class="card-1"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="card-top-1">
                      <p>人事概况</p>
                      <icon-more
                        v-show="setWorkPlaceVisible"
                        :size="28"
                        class="move icon drag-icon"
                      />
                    </div>
                    <div class="card-main-1">
                      <div class="card-2-item">
                        <p>0<span>人</span></p>
                        <p>在职</p>
                      </div>
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>正式</p>
                      </div>
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>全职</p>
                      </div>
                    </div>
                    <div class="personnel">
                      <div class="personnel-item">
                        <a-progress
                          type="circle"
                          size="medium"
                          :percent="0.2"
                        />
                        <div class="personnel-text">
                          <p>员工端开通率</p>
                          <p>1人未开通</p>
                        </div>
                      </div>
                      <div class="personnel-item">
                        <a-progress
                          type="circle"
                          size="medium"
                          :percent="0.2"
                        />
                        <div class="personnel-text">
                          <p>员工端开通率</p>
                          <p>1人未开通</p>
                        </div>
                      </div>
                      <div class="personnel-item">
                        <a-progress
                          type="circle"
                          size="medium"
                          :percent="0.2"
                        />
                        <div class="personnel-text">
                          <p>员工端开通率</p>
                          <p>1人未开通</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- <template v-if="element.key === 6">
                  <div
                    class="cn-3"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  ></div>
                </template> -->
              </div>
            </template>
          </draggable>
        </div>

        <div class="cn">
          <draggable
            class="list-group"
            :list="workplaceDraggableList.sorts[1]"
            group="dragList"
            handle=".move"
            item-key="key"
            @change="onChange"
          >
            <template #item="{ element }">
              <div class="">
                <template v-if="element.key === 1">
                  <div
                    class="card"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="top">
                      <div></div>
                      <icon-more
                        v-show="setWorkPlaceVisible"
                        :size="28"
                        class="move icon drag-icon"
                      />
                    </div>

                    <div class="calendar">
                      <a-calendar
                        v-model="dateValue"
                        @change="dateChange"
                        mode="month"
                      />
                    </div>
                    <div class="card-top">
                      <div class="card-top-left">
                        <p>{{ new Date().getDate() }}</p>
                        <p>
                          <span>{{ getCurrentDateTime(dateValue) }} </span>
                          <span
                            >农历
                            {{
                              showCal(dateValue).lunarMonth +
                              '月' +
                              '' +
                              showCal(dateValue).lunarDay
                            }}</span
                          >
                        </p>
                      </div>
                      <!-- <div
                class="card-top-right"
                @click="
                  addRemindVisible = true;
                  currentSchedule = {};
                "
              >
                <icon-plus-circle-fill style="color: #3d7eff" />
              </div> -->
                      <a-tooltip content="新增日程待办">
                        <icon-plus-circle-fill
                          class="card-top-right"
                          @click="
                            addRemindVisible = true;
                            currentSchedule = {};
                          "
                        />
                      </a-tooltip>
                    </div>
                    <div class="card-main">
                      <div class="text" v-if="scheduleList?.length > 0">
                        <p
                          class="schedule"
                          v-for="(item, index) in scheduleList"
                          :key="item.id"
                          :style="{
                            '--schedule-bgcolor': lightenColor(item.color, 35)
                          }"
                          @click="handleSchedule(item)"
                        >
                          <a-space direction="vertical" :size="0">
                            <header
                              :style="{
                                '--schedule-dot-color': item.color
                              }"
                            >
                              {{ item.text }}
                            </header>
                            <span class="remind-tip">
                              {{
                                formatTimeRange(
                                  dateValue,
                                  item.endTime.split(',')[0],
                                  item.endTime.split(',')[1]
                                )
                              }}
                            </span>
                            <div
                              class="remind-tip"
                              v-if="item.participantId !== ''"
                            >
                              <a-space :size="0">
                                <template
                                  v-for="(item, index) in item.participantName
                                    .split(',')
                                    .slice(0, 3)"
                                  :key="index"
                                >
                                  <span>{{ item }},</span>
                                </template>
                                <span
                                  v-if="
                                    item.participantName.split(',').length > 3
                                  "
                                  >...</span
                                >
                              </a-space>
                              <span class="ml-5"
                                >等{{
                                  item.participantName.split(',').length
                                }}位参与者</span
                              >
                            </div>
                          </a-space>
                          <a-space>
                            <a-popconfirm
                              content="是否确认完成该条待办？"
                              @ok="scheduleClick(item.id, index, 1)"
                            >
                              <icon-check-circle
                                class="icon"
                                :size="24"
                                @click.stop
                                :style="{
                                  color: item.done === 1 ? '#3d7eff' : '#ccc'
                                }"
                              />
                            </a-popconfirm>
                            <a-popconfirm
                              content="是否确认删除该条待办？"
                              @ok="scheduleClick(item.id, index, 2)"
                            >
                              <icon-close-circle
                                class="icon"
                                :size="24"
                                :style="{
                                  color: '#ccc'
                                }"
                                @click.stop
                              />
                            </a-popconfirm>
                          </a-space>
                        </p>
                      </div>
                      <div v-else>当日无事项</div>
                      <div class="btn">
                        <a-button
                          @click="
                            router.push({
                              name: 'Schedule'
                            })
                          "
                          >查看更多<icon-double-right
                        /></a-button>
                        <a-button><icon-archive /> 员工关怀</a-button>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-if="element.key === 2">
                  <div
                    class="contract"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="top">
                      <p class="title">合同概况</p>
                      <icon-more
                        :size="28"
                        class="move icon drag-icon"
                        v-show="setWorkPlaceVisible"
                      />
                    </div>

                    <main>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>待签合同预警</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同到期预警</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同续签</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同变更</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同解除</div>
                      </section>
                      <section>
                        <div>
                          <span>25</span>
                          人
                        </div>
                        <div>合同终止</div>
                      </section>
                    </main>
                  </div>
                </template>
                <template v-if="element.key === 3">
                  <div
                    class="cn-0"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <a-list :bordered="false" hoverable size="small">
                      <template #header>
                        <div class="top">
                          <a-space :size="16">
                            <a-badge :count="2" :offset="[15, 0]">
                              <span class="title">通知公告</span>
                            </a-badge>
                            <a-button type="text">全部设为已读</a-button>
                          </a-space>
                          <a-button type="text" v-show="!setWorkPlaceVisible"
                            >设置</a-button
                          >
                          <icon-more
                            :size="28"
                            class="move icon drag-icon"
                            v-show="setWorkPlaceVisible"
                          />
                        </div>
                      </template>
                      <a-list-item>
                        <a-space>
                          <a-badge
                            :count="9"
                            dot
                            :dotStyle="{
                              width: '10px',
                              height: '10px',
                              cursor: 'pointer'
                            }"
                          >
                          </a-badge>
                          <div
                            class="text-ellipsis"
                            title="Beijing Bytedance Technology Co., Ltd.Beijing Bytedance
                  Technology Co., Ltd."
                          >
                            Beijing Bytedance Technology Co., Ltd.Beijing
                            Bytedance Technology Co., LtdTechnology Co.,
                            Ltd.Technology Co., Ltd.. Beijing Bytedance
                            Technology Co., Ltd.Beijing Bytedance Technology
                            Co., LtdTechnology Co., Ltd.Technology Co., Ltd..
                          </div>
                        </a-space>

                        <template #actions>
                          <span>2022-03-10 12:43</span>
                        </template>
                      </a-list-item>
                      <a-list-item>Bytedance Technology Co., Ltd.</a-list-item>
                      <a-list-item
                        >Beijing Toutiao Technology Co., Ltd.</a-list-item
                      >
                      <a-list-item
                        >Beijing Volcengine Technology Co., Ltd.</a-list-item
                      >
                    </a-list>
                    <div class="bottom">
                      <div></div>
                      <div>查看更多<icon-right /></div>
                      <div></div>
                    </div>
                  </div>
                </template>

                <template v-if="element.key === 4">
                  <div
                    class="cn-1"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="top">
                      <p class="title">快捷入口</p>
                      <icon-more
                        :size="28"
                        class="move icon drag-icon"
                        v-show="setWorkPlaceVisible"
                      />
                    </div>
                    <div class="main">
                      <div
                        class="item"
                        @click="
                          router.push({
                            name: 'AddNewemployee'
                          })
                        "
                      >
                        <IconFont type="icon-zuzhijiagou" :size="28" />
                        添加新员工
                      </div>
                      <div class="item">
                        <IconFont type="icon-gaizhang" :size="28" />
                        签署管理
                      </div>
                      <div class="item">
                        <IconFont
                          type="icon-panhebaobiao"
                          style="background-color: #63a0ee"
                          :size="28"
                        />
                        报表管理
                      </div>
                      <div
                        class="item"
                        @click="
                          router.push({
                            name: 'JobManagement'
                          })
                        "
                      >
                        <IconFont
                          type="icon-zhiwuguanli"
                          style="background-color: #fbb47d"
                          :size="28"
                        />

                        职务管理
                      </div>
                      <div class="item">
                        <IconFont
                          type="icon-quanxianpeizhi"
                          style="background-color: #fa908f"
                          :size="28"
                        />
                        权限管理
                      </div>
                      <div
                        class="item"
                        @click="
                          router.push({
                            name: 'HumanRoster'
                          })
                        "
                      >
                        <IconFont type="icon-caisewendang" :size="28" />
                        员工档案
                      </div>
                    </div>
                    <div class="bottom">
                      <div></div>
                      <div>展开<icon-down /></div>
                      <div></div>
                    </div>
                  </div>
                </template>
                <template v-if="element.key === 5">
                  <div
                    class="cn-2"
                    @scroll="handleScroll"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="top-2">
                      <div class="tab">
                        <div
                          class="tab-item"
                          :class="{ 'actibve-tab-item': isTab === 1 }"
                          @click="clickTab(1)"
                        >
                          {{ ` 我的待办(${params.totalItems})` }}
                        </div>
                        <div
                          class="tab-item"
                          :class="{ 'actibve-tab-item': isTab === 2 }"
                          @click="clickTab(2)"
                        >
                          我的审批(0)
                        </div>
                      </div>
                      <icon-more
                        v-show="setWorkPlaceVisible"
                        :size="28"
                        class="move icon drag-icon"
                      />
                    </div>
                    <div v-show="isTab === 1">
                      <div
                        class="main-2"
                        v-for="a in backlogData.slice(0, 4)"
                        :key="a.id"
                      >
                        <!-- <div class="main-2" v-for="a in backlogData" :key="a.id"> -->
                        <div class="icon"></div>
                        <div class="tab-main">
                          <div class="tab-mian-top">
                            <div class="status">
                              {{
                                backlogType.filter(
                                  (ele) => ele.id === a.type
                                )[0]?.value
                              }}
                            </div>
                            <!-- <div class="status">
                          {{
                            backlogType.filter((ele) => ele.id === a.type)[0]
                              ?.value
                          }}
                        </div> -->
                            <div class="text-main">
                              {{ a.title }}
                              <!-- {{ a.title }} -->
                            </div>
                            <div class="next-main">
                              {{ a.state === 1 ? '待处理' : '已处理' }}
                            </div>
                            <!-- <div class="next-main">
                          {{ a.state === 1 ? '待处理' : '已处理' }}
                        </div> -->
                          </div>
                          <div class="tab-mian-bottom">
                            <div class="section">
                              {{ a.createName || '系统测试' }}发起
                            </div>
                            <div class="time">
                              {{ dayjs(a.createdAt).format('YYYY年MM月DD日') }}
                            </div>
                          </div>
                          <!-- <div class="section">
                        {{ a.createName || '系统测试' }}发起
                      </div>
                      <div class="time">
                        {{ dayjs(a.createdAt).format('YYYY年MM月DD日') }}
                      </div> -->
                        </div>

                        <!-- </div> -->
                      </div>
                      <a-table v-show="isTab === 2" :columns="[]" :data="[]" />
                      <div class="bottom">
                        <div></div>
                        <div>查看更多<icon-right /></div>
                        <div></div>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-if="element.key === 6">
                  <div
                    class="card-1"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="card-top-1">
                      <p>今日考勤</p>
                      <icon-more
                        v-show="setWorkPlaceVisible"
                        :size="28"
                        class="move icon drag-icon"
                      />
                    </div>
                    <div class="card-main-1">
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>正常打卡</p>
                      </div>
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>异常打卡</p>
                      </div>
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>缺卡</p>
                      </div>
                    </div>
                    <div class="clocking-in">
                      <div class="clocking-in-item" v-for="a in 2" :key="a">
                        <div class="left">
                          <p>迟到</p>
                          <p>今日没有员工迟到</p>
                        </div>
                        <div calss="right">0人</div>
                      </div>
                    </div>
                    <div class="bottom-1">
                      <div></div>
                      <div>查看打卡记录<icon-right /></div>
                      <div></div>
                    </div>
                  </div>
                </template>
                <template v-if="element.key === 7">
                  <div
                    class="card-1"
                    :class="{
                      'shake-div': setWorkPlaceVisible
                    }"
                  >
                    <div class="card-top-1">
                      <p>人事概况</p>
                      <icon-more
                        v-show="setWorkPlaceVisible"
                        :size="28"
                        class="move icon drag-icon"
                      />
                    </div>
                    <div class="card-main-1">
                      <div class="card-2-item">
                        <p>0<span>人</span></p>
                        <p>在职</p>
                      </div>
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>正式</p>
                      </div>
                      <div class="card-2-item">
                        <p>0<span>个</span></p>
                        <p>全职</p>
                      </div>
                    </div>
                    <div class="personnel">
                      <div class="personnel-item">
                        <a-progress
                          type="circle"
                          size="medium"
                          :percent="0.2"
                        />
                        <div class="personnel-text">
                          <p>员工端开通率</p>
                          <p>1人未开通</p>
                        </div>
                      </div>
                      <div class="personnel-item">
                        <a-progress
                          type="circle"
                          size="medium"
                          :percent="0.2"
                        />
                        <div class="personnel-text">
                          <p>员工端开通率</p>
                          <p>1人未开通</p>
                        </div>
                      </div>
                      <div class="personnel-item">
                        <a-progress
                          type="circle"
                          size="medium"
                          :percent="0.2"
                        />
                        <div class="personnel-text">
                          <p>员工端开通率</p>
                          <p>1人未开通</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </draggable>
        </div>

        <div class="right">
          <div class="user-info">
            <div class="top">
              <a-avatar
                :image-url="avatar"
                :size="100"
                :style="{
                  transform: 'translateY(50px)',
                  background: '#bcd5f8'
                }"
              >
                <IconUser />
              </a-avatar>
            </div>
            <div class="cn">
              <div class="user-1">
                <p>{{ '测试者' }}</p>
                <p>{{ '测试者佛山领壹制造公司人事专员-M2' }}</p>
              </div>
              <div class="user-2">
                <div class="item" @click="goUser2Detail(1)">
                  <IconFont type="icon-caisewendang" :size="28" />
                  <p>个人主页</p>
                </div>
                <div class="item">
                  <IconFont type="icon-caisewendang" :size="28" />
                  <p>我的考勤</p>
                </div>
                <div class="item">
                  <IconFont type="icon-caisewendang" :size="28" />
                  <p>我的绩效</p>
                </div>
                <div class="item">
                  <IconFont type="icon-caisewendang" :size="28" />
                  <p>我的档案</p>
                </div>
              </div>
              <div class="user-3">
                <div class="item">
                  <p>工号:</p>

                  <p>LY000168</p>
                </div>
                <div class="item">
                  <p>入职日期:</p>

                  <p>2023-06-28</p>
                </div>
                <div class="item">
                  <p>所属部门:</p>

                  <p>人力资源部</p>
                </div>
                <div class="item">
                  <p>个性标签:</p>
                  <a-space>
                    <a-tag
                      v-for="(tag, index) of tags.slice(0, 3)"
                      :key="tag"
                      @close="removeTag(index)"
                      @click="tagClick(tag, index)"
                      :color="TAG_COLOR_ENUMS[index % TAG_COLOR_ENUMS.length]"
                      closable
                    >
                      {{ tag }}
                    </a-tag>
                    <a-tooltip content="查看更多标签">
                      <IconFont
                        type="icon-more-def"
                        :size="26"
                        class="icon"
                        @click="showMoreTag"
                        v-if="tags.length > 3"
                      ></IconFont>
                    </a-tooltip>
                    <a-tooltip content="新增标签">
                      <icon-plus-circle
                        @click="addTag"
                        class="icon"
                        style="color: #165dff; line-height: 26px"
                        :size="16"
                      />
                    </a-tooltip>
                  </a-space>
                </div>
              </div>
            </div>
          </div>
          <div class="workmate">
            <div class="top-1">
              <p>同事关注</p>
            </div>
            <div class="workmates">
              <div class="workmate-item">
                <a-avatar :size="50" :style="{ backgroundColor: '#3370ff' }">
                  <IconUser />
                </a-avatar>
                <div class="info">
                  <p>宇宙航行日记</p>
                  <p>华为科技有限公司</p>
                  <p>有限公司总</p>
                </div>
                <a-button v-show="true" type="primary">互相关注</a-button>
                <!-- <a-button v-show="false">关注</a-button> -->
              </div>
              <div class="workmate-item">
                <a-avatar :size="50" :style="{ backgroundColor: '#3370ff' }">
                  <IconUser />
                </a-avatar>
                <div class="info">
                  <p>宇宙航行日记</p>
                  <p>华为科技有限公司</p>
                  <p>有限公司总</p>
                </div>
                <!-- <a-button v-show="true" type="primary">互相关注</a-button> -->
                <a-button style="border: 1px solid #f2f2f2">关注</a-button>
              </div>
              <div class="workmate-item">
                <a-avatar :size="50" :style="{ backgroundColor: '#3370ff' }">
                  <IconUser />
                </a-avatar>
                <div class="info">
                  <p>宇宙航行日记</p>
                  <p>华为科技有限公司</p>
                  <p>有限公司总</p>
                </div>
                <!-- <a-button v-show="true" type="primary">互相关注</a-button> -->
                <a-button style="border: 1px solid #f2f2f2">关注</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <AddRemindModal
      v-model:visible="addRemindVisible"
      :date="dateValue"
      @scheduleEmit="scheduleEmit"
      :data="currentSchedule"
    />
    <AddTag
      v-model:visible="addTagVisible"
      :data="currTagData"
      @tagAddEmit="tagAddEmit"
    />
  </ContentCard>
</template>

<script lang="tsx" setup>
import { showCal, getCurrentDateTime } from '@/utils/calender';
import AddRemindModal from './Components/AddRemindModal/index.vue';
import draggable from 'vuedraggable';
import dayjs from 'dayjs';
import {
  PostSchedule2Do,
  GetSchedule2Do,
  DelSchedule2Do,
  PutSchedule2Do,
  GetWorkPlaceSort,
  PostWorkPlaceSort,
  PutWorkPlaceSort,
  PutHumanTag
} from '@/apis/management/home/workPlace';
import { GetHumanRosterDetail } from '@/apis/management/human/humanRoster';
import { lightenColor, formatTimeRange } from '@/utils/utils';
import { getBacklogCenter } from '@/apis/backlog/index';
import { cloneDeep } from 'lodash';
import AddTag from './Components/AddTag/index.vue';
import { Modal, Tag, Message, Space } from '@arco-design/web-vue';
import { TAG_COLOR_ENUMS } from '@/utils/constants';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const { personalHeadPortrait } = JSON.parse(
  localStorage.getItem('userInfo') + ''
);
const personalHeadPortraitold = localStorage.getItem('personalHeadPortrait');
const avatar = computed(() => {
  return (
    userStore.personalHeadPortrait ||
    personalHeadPortrait ||
    personalHeadPortraitold
  );
});
const router = useRouter();
const userId = +(localStorage.getItem('userId') as string);
const backlogType = [
  { id: 1, value: '组织' },
  { id: 2, value: '人事' },
  { id: 3, value: '考勤' },
  { id: 4, value: '绩效' },
  { id: 5, value: '薪资' },
  { id: 6, value: '合同' },
  { id: 7, value: '审批' }
];

const images = [
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp'
];

// 待办卡片分页
const params = reactive<any>({
  pageNumber: 0,
  pageSize: 5,
  totalItems: 0,
  totalPages: null
});

const backlogData = ref([]); // 我的待办数据
// 获取待办信息
const getBacklogData = async () => {
  const { content, pageable } = await getBacklogCenter({
    ...params,
    userId
  });
  console.log(content, pageable);
  backlogData.value = backlogData.value.concat(content);
  params.totalItems = pageable.totalItems;
  params.totalPages = pageable.totalPages;
};
getBacklogData();

const loadmore = () => {
  if (params.totalPages === params.pageNumber) return;
  params.pageNumber += 1;
  getBacklogData();
};

const handleScroll = (event) => {
  const target = event.target as HTMLElement;
  if (target.scrollHeight - target.scrollTop === target.clientHeight) {
    console.log('已经滚动到底部');
    loadmore();
  }
};

let humanInfo = ref(); // 储存个人信息
const initData = async () => {
  try {
    const [scheduleRes, workplaceSortRes, humanInfoRes] = await Promise.all([
      GetSchedule2Do({
        date: dayjs().format('YYYY-MM-DD'),
        id: userId
      }),
      GetWorkPlaceSort({
        userId
      }),
      GetHumanRosterDetail({
        id: userId
      })
    ]);
    scheduleList.value = scheduleRes;
    // 刚创建账号的时候没有排序则先新增
    if (!workplaceSortRes?.id) {
      await PostWorkPlaceSort({
        userId,
        sorts: JSON.stringify(workplaceDraggableList.value.sorts)
      });
      const res = await GetWorkPlaceSort({
        userId
      });
      workplaceDraggableList.value = res;
      workplaceDraggableList.value.sorts = JSON.parse(
        workplaceDraggableList?.value.sorts
      );
    } else {
      workplaceDraggableList.value = workplaceSortRes;
      workplaceDraggableList.value.sorts = JSON.parse(
        workplaceDraggableList?.value.sorts
      );
    }
    humanInfo.value = humanInfoRes;
    tags.value =
      humanInfo.value?.diyTip !== '' ? humanInfo.value?.diyTip.split(',') : [];
    console.log('====================================');
    console.log(workplaceDraggableList.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
initData();

// 工作台移动设置(初始值)
let workplaceDraggableList = ref({
  sorts: [
    [
      {
        key: 1,
        name: '日历'
      },
      {
        key: 7,
        name: '人事概况'
      },
      {
        key: 2,
        name: '合同概况'
      }
    ],
    [
      {
        key: 3,
        name: '通知公告'
      },
      {
        key: 4,
        name: '快捷入口'
      },
      {
        key: 5,
        name: '待办'
      },
      {
        key: 6,
        name: '考勤'
      }
    ]
  ],
  userId
});
let setWorkPlaceVisible = ref(false); // 工作台设置

// 当页面正处于工作台设置时，当用户点击除了可以移动的设置的其他地方时，设置工作台设置为 false
document.addEventListener('click', async function (event) {
  const targetClass = 'cn';
  let isClickInside = false;
  const targetElements = document.getElementsByClassName(targetClass);
  for (let i = 0; i < targetElements.length; i++) {
    if (targetElements[i].contains(event.target)) {
      isClickInside = true;
      break;
    }
  }
  if (!isClickInside) {
    // 点击发生在目标元素外部
    // 在这里执行你想要的逻辑
    if (setWorkPlaceVisible.value) {
      setWorkPlaceVisible.value = false;
      const data = cloneDeep(workplaceDraggableList.value);
      data.sorts = JSON.stringify(data.sorts);
      await PutWorkPlaceSort(data);
    }
  }
});
// 工作台移动设置
const workPlaceSetting = async () => {
  try {
    setWorkPlaceVisible.value = !setWorkPlaceVisible.value;
    if (!setWorkPlaceVisible.value) {
      const data = cloneDeep(workplaceDraggableList.value);
      data.sorts = JSON.stringify(data.sorts);
      await PutWorkPlaceSort(data);
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const dateValue = ref(new Date()); // 日历日期
let disabledSeconds = Array.from({ length: 60 }, (v, i) => i + 1);
let scheduleList = ref([]); // 日程待办列表

// 点击日历上的时间获取当天的日程
const dateChange = (val: Date) => {
  getSchedule(dayjs(val).format('YYYY-MM-DD'));
};
// 获取某天的日程
const getSchedule = async (date: string) => {
  try {
    const res = await GetSchedule2Do({
      date,
      id: userId
    });
    scheduleList.value = res;
  } catch (error: unknown) {
    console.log(error);
  }
};

const isTab = ref(1);
const clickTab = (e: number) => {
  isTab.value = e;
};
const addRemindVisible = ref(false); // 新增待办事项弹窗

// 新增待办事项自定义事件
const scheduleEmit = async (data: any) => {
  try {
    if (data?.id) {
      await PutSchedule2Do(data);
    } else await PostSchedule2Do(data);
    getSchedule(dayjs(dateValue.value).format('YYYY-MM-DD'));
  } catch (error: unknown) {
    console.log(error);
  }
};

let currentSchedule = ref({});
const handleSchedule = (record: any) => {
  currentSchedule.value = record;
  addRemindVisible.value = true;
};

/**
 * 点击待办事项√或者x
 * type 1完成 2删除
 */
const scheduleClick = async (id: number, ind: number, type: 1 | 2) => {
  try {
    if (type === 1) {
      await PutSchedule2Do({
        id,
        done: 1
      });
    } else if (type === 2) {
      await DelSchedule2Do({
        id
      });
    }
    getSchedule(dayjs(dateValue.value).format('YYYY-MM-DD'));
  } catch (error: unknown) {
    console.log(error);
  }
};

/*
  前往个人主页该卡片详情
  1 个人主页
  2 我的考勤
  3 我的绩效
  4 我的档案
*/
const goUser2Detail = (val: number) => {
  switch (val) {
    case 1:
      router.push({
        name: 'MyHomePage'
      });
      break;
    case 4:
      router.push({
        name: 'HumanRosterDetail',
        query: {
          id: userId
        }
      });
      break;
    default:
      break;
  }
};

const tags = ref([]);
let addTagVisible = ref(false); // 新增标签弹窗
let currTagData = ref(''); // 当前选中的标签

// 添加标签
const addTag = () => {
  isTagEdit.value = false;
  currTagData.value = '';
  addTagVisible.value = true;
};

let isTagEdit = ref(false); // 判断是否是编辑标签
let currTagInd = ref(-1); // 当前选中的标签下标
// 点击标签
const tagClick = (tag: string, ind: number) => {
  currTagData.value = tag;
  currTagInd.value = ind;
  isTagEdit.value = true;
  addTagVisible.value = true;
};

// 显示更多标签
const showMoreTag = () => {
  const content = (
    <>
      {
        <Space>
          {tags.value.map((tag, index) => {
            return (
              <Tag
                closable
                onClose={() => removeTag(index)}
                class="tag"
                color={TAG_COLOR_ENUMS[index % TAG_COLOR_ENUMS.length]}
              >
                {tag}
              </Tag>
            );
          })}
        </Space>
      }
    </>
  );
  Modal.open({
    title: '更多标签',
    content
  });
};

// 删除标签
const removeTag = async (ind: number) => {
  try {
    tags.value.splice(ind, 1);
    await PutHumanTag({
      id: userId,
      type: 1,
      text: tags.value.join(',')
    });
    //
  } catch (error: unknown) {
    console.log(error);
  }
};

// 新增个性标签自定义事件
const tagAddEmit = async (data: any) => {
  try {
    if (isTagEdit.value) {
      tags.value.splice(currTagInd.value, 1, data.name);
    } else {
      data.name.split(/,|，/).forEach((el: any) => {
        tags.value.push(el);
      });
    }
    await PutHumanTag({
      id: userId,
      type: 1,
      text: tags.value.join(',')
    });
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.workplace-container {
  // background-color: #f5f7fb;
  // overflow: hidden;
  width: 100%;
  height: 100%;
  p {
    margin: 0;
    padding: 0;
  }
  .top-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px 0;

    p {
      margin: 0;
      padding: 0;
    }
    p:nth-child(1) {
      font-size: 24px;
    }
    .top-s {
      display: flex;
      padding: 0 20px;
      align-items: center;
      border: 1px solid #d8eaf3;
      height: 30px;
      margin: 0 20px;
      font-size: 12px;
      flex: 1;
      text-align: center;
      background-color: #f0fbfd;
      border-radius: 5px;
      // span {
      //   color: #3d7eff;
      // }
      p {
        text-align: initial;
        flex: 1;
      }
    }
  }
  .main {
    display: flex;
    .left {
      flex: 1;
      // min-width: 350px;
      margin-right: 20px;

      .carousel {
        padding: 20px;
        height: 150px;
        border-radius: 15px;
        margin-bottom: 20px;
        border: 1px #eee solid;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */
      }
    }
    .cn {
      // margin: 0 20px;
      flex: 2;
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 20px;
      // min-width: 350px;
      .user-info {
        background: #fff;
        border-radius: 15px;
        // padding-bottom: 20px;
        padding: 20px;
        border: 1px #eee solid;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */
        .top {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          border-top-left-radius: 15px;
          border-top-right-radius: 15px;
          background: #3565ee;
          height: 110px;
        }
        .cn {
          padding-top: 70px;
          .user-1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            P:nth-child(2) {
              color: #7a7a7a;
              margin-top: 10px;
            }
          }
          .user-2 {
            display: flex;
            justify-content: space-around;
            padding: 20px 0;
            border-bottom: 1px solid #e8e8e8;
            .item {
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
              p {
                margin-top: 10px;
              }
            }
          }
          .user-3 {
            margin: 20px 0;
            .item {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              p:nth-child(1) {
                width: 80px;
                margin-left: 10px;
                text-align: justify;
                text-justify: distribute-all-lines;
                text-align-last: justify;
              }
              p:nth-child(2) {
                margin-left: 10px;
              }
            }
          }
        }
      }
      .workmate {
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */
        background: #fff;
        border-radius: 15px;
        padding: 20px;
        border: 1px #eee solid;
        flex: 1;
        margin: 20px 0;
        .top-1 {
          display: flex;
          justify-content: space-between;
        }
        .workmates {
          .workmate-item {
            margin: 20px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .info {
              color: #888888;
              font-size: 12px;
              line-height: 19px;
              p:nth-child(1) {
                color: #000;
              }
            }
            button {
              width: 90px;
            }
          }
        }
      }
    }
  }
}

.card {
  flex: 1;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */
  display: flex;
  flex-direction: column;
  // height: 400px;
  border: 1px #eee solid;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 20px;

  .calendar {
    padding: 20px;
    flex: 1;
  }
  .card-top {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    p {
      padding: 0;
      margin: 0;
    }
    .card-top-left {
      display: flex;
      align-items: center;
      p:nth-child(1) {
        font-weight: 900;
        font-size: 50px;
        margin-right: 8px;
      }
      p:nth-child(2) {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        line-height: 20px;
      }
    }
    .card-top-right {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      width: 25px;
      height: 25px;
      color: #3d7eff;
      cursor: pointer;
      box-shadow: 0px 0px 10px rgba(76, 136, 255, 0.6);
    }
  }
  .card-main {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 20px 0;
    .text {
      font-size: 13px;
      .schedule {
        display: flex;
        justify-content: space-between;
        background-color: var(--schedule-bgcolor);
        padding: 5px;
        cursor: pointer;
        header {
          font-weight: 700;
          &::before {
            content: '';
            width: 10px;
            height: 10px;
            background: var(--schedule-dot-color);
            display: inline-block;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
        &-tip {
          padding-left: 15px;
        }
      }
      p {
        margin-bottom: 10px;
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      button {
        border: 1px solid #f2f2f2;
        flex: 1;
      }
    }
  }
}
.contract {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px #eee solid;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  main {
    margin-top: 20px;
    display: grid;
    grid-template-rows: auto auto; /* 定义两行，高度自适应内容 */
    grid-template-columns: auto auto auto; /* 定义三列，宽度自适应内容 */
    gap: 10px; /* 设置网格间隙 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center; /* 文字内容居中 */
    position: relative;
    // top: 50%;
    // transform: translateY(-50%);
    section {
      // padding: 20px; /* 设置上下左右的内边距 */
      &:nth-child(1) span,
      &:nth-child(4) span {
        color: #165dff;
      }
      &:nth-child(2) span,
      &:nth-child(5) span {
        color: orange;
      }
      &:nth-child(3) span,
      &:nth-child(6) span {
        color: red;
      }
      span {
        font-size: 18px;
      }
      div {
        padding: 10px 0;
      }
    }
  }
}

.cn-0 {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px #eee solid;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */

  .top {
    display: flex;
    justify-content: space-between;
  }
}
.cn-1 {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px #eee solid;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */
  div {
    display: flex;
  }
  .top {
    justify-content: space-between;
    color: #b6b6b6;
    p {
      color: #000;
      font-size: 16px;
      font-weight: 800;
    }
  }
  .main {
    justify-content: space-between;
    margin: 20px 0;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      .arco-icon {
        margin-bottom: 20px;
      }
    }
  }
}
.bottom {
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 10px;
  div:nth-child(1),
  div:nth-child(3) {
    flex: 1;
    background: #dfddde;
    height: 1px;
  }
  div:nth-child(2) {
    margin: 0 10px;
    color: #6f6f6f;
    .arco-icon {
      margin-left: 5px;
    }
  }
}
.cn-2 {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  height: 460px;
  overflow-x: hidden;
  border: 1px #eee solid;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */
  .top-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
    .tab {
      display: flex;
      cursor: pointer;
      color: #cdcdcd;
      .tab-item {
        color: #cdcdcd;
        margin-right: 20px;
        font-size: 15px;
        font-weight: 900;
      }
    }
  }
  .main-2 {
    display: flex;
    align-items: center;
    // height: 100px;
    .icon {
      border-radius: 50%;
      background-color: #eba34b;
      width: 15px;
      height: 15px;
      margin: 20px;
    }
    .tab-main {
      margin: 20px 0;
      div {
        display: flex;
      }
      .tab-mian-top {
        align-items: center;
        margin-bottom: 10px;
        .status {
          padding: 5px;
          background-color: #fe6c28;
          border-radius: 5px;
          color: #fff;
        }
        .text-main {
          margin: 0 20px 0 10px;
        }
        .next-main {
          padding: 5px;
          border-radius: 5px;
          background-color: #f1f3ff;
          color: #4373b4;
        }
      }
      .tab-mian-bottom {
        font-size: 12px;
        color: #d3d3d3;
        .section {
          margin-right: 20px;
        }
      }
    }
  }
}

.card-1 {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px #eee solid;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */

  .card-top-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
  }
  .card-main-1 {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #f2f2f2;
    .card-2-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      p:nth-child(1) {
        font-size: 20px;
        margin-bottom: 20px;
        span {
          font-size: 12px;
          color: #888888;
        }
      }
    }
  }
  .clocking-in {
    padding-top: 20px;
    .clocking-in-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .left {
        p {
          font-size: 12px;
        }
        p:nth-child(2) {
          margin-top: 5px;
          color: #888888;
        }
      }
    }
  }
  .bottom-1 {
    display: flex;
    align-items: center;
    cursor: pointer;
    div:nth-child(1),
    div:nth-child(3) {
      flex: 1;
      background: #dfddde;
      height: 1px;
    }
    div:nth-child(2) {
      margin: 0 10px;
      color: #6f6f6f;
      .arco-icon {
        margin-left: 5px;
      }
    }
  }
  .personnel {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .personnel-item {
      .personnel-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        color: #666666;

        p:nth-child(2) {
          font-size: 12px;
          color: #888888;
          margin-top: 5px;
        }
      }
    }
  }
}
.cn-3 {
  // display: flex;
  padding: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px #eee solid;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 水平偏移量, 垂直偏移量, 模糊半径, 阴影颜色 */

  .card-1:nth-child(1) {
    margin-right: 20px;
  }
}

.top {
  display: flex;
  justify-content: space-between;

  .title {
    color: #000;
    font-size: 16px;
    font-weight: 800;
  }
}
// .title {
//   position: relative;
//   &::before {
//     position: absolute;
//     // top: 33px;
//     left: -15px;
//     display: inline-block;
//     height: 18px;
//     top: 50%;
//     transform: translateY(-50%);
//     width: 10px;
//     margin-right: 20px;
//     border-radius: 2px;
//     // transform: translateY(-50%);
//     content: '';
//     background-color: #165dff;
//   }
// }
.text-ellipsis {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-width: 200px; /* 设置最大宽度 */
}

.icon {
  cursor: pointer;
}

.drag-icon {
  color: #ccc;
  float: right;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1px) rotate(0.5deg);
  }
  50% {
    transform: translateX(1px) rotate(-0.5deg);
  }
  75% {
    transform: translateX(-1px) rotate(0.5deg);
  }
  100% {
    transform: translateX(0);
  }
}
/* 应用震动效果的样式 */
.shake-div {
  animation: shake 0.5s infinite;
}

.icon {
  cursor: pointer;
}

:deep(.arco-calendar-week-list-item) {
  text-align: center;
  padding: 6px 9px;
}
:deep(.arco-calendar-date) {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.arco-calendar-month-row) {
  height: 50px;
}
:deep(.arco-calendar-header-value) {
  font-size: 16px;
}
:deep(.arco-calendar-header-right) {
  display: none;
}
:deep(.arco-calendar-header-left) {
  justify-content: space-between;
}
:deep(.arco-btn-secondary) {
  background-color: #fff;
}
:deep(.arco-calendar-header) {
  padding: 10px;
}
:deep(.arco-calendar-cell-in-view) {
  border: none;
}

:deep(.arco-calendar-cell) {
  border: none !important;
}
:deep(.arco-calendar-week-list) {
  border: none;
}
.arco-calendar {
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.actibve-tab-item {
  color: #3a5fad !important;
}

.icon {
  cursor: pointer;
}

/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  z-index: 100;
  width: 6px;
  height: 6px;
  background-color: #fff;
}

// /* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  z-index: 100;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}

// /* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  z-index: 100;
  background-color: rgb(169 169 169 / 50%);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}

:deep(.arco-calendar) {
  border: none;
  box-shadow: none;
}
</style>
